import React from 'react'
import 'moment/locale/zh-cn';
import { Button, Select, Pagination, DatePicker, message } from 'antd'
import u from '../common.js' // 引入公共定义js方法
import { exportExcel } from 'xlsx-oc'
import '../static/illicitName.less'
import moment from 'moment';
const Option = Select.Option
const { RangePicker } = DatePicker
class IllicitName extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      sourceName: '0',
      list: [],
      source: [],
      currentCount: 1,
      page: 1,
      total: null,
      domain: '',
      inpVal: '',
      timeValue: [],
      publishTime: '',
      endTime: ''
    }
  }

  componentDidMount() {
    this.getIllicitList()
  }

  getIllicitList() {
      u.illicitList({
        pageNum : this.state.currentCount,
        pageSize : 10,
      }, data => {
        this.setState({
          list: data.data,
          source: data.source,
          total: data.total
        })
      })
  }

  searchCon () {
    u.illicitQuery({
        source_number: this.state.sourceName === '0' ? '' : this.state.sourceName,
        domain: this.state.inpVal,
        pageNum : this.state.currentCount,
        pageSize : 10,
        sTime: this.state.publishTime,
        eTime: this.state.endTime
      }, data => {
        if (data.code === 200) {
          this.setState({
            list: data.data,
            source: data.source,
            total: data.total
          })
        } else {
          this.setState({
            list: [],
            source: 0,
            total: 0
          })
          message.error(`没有查询到数据`);
        }
       
    })
  }

  handelChange (e) {
    this.setState({
      inpVal: e.target.value
    })
  }

  onChangeSize = (page) => {
    let currentCount = (page - 1) * 10
    this.setState({
      currentCount: currentCount,
      page: page
    }, () => {
      this.searchCon()
    })
  }

  queryBtn = () => {
    this.searchCon()
  }

  resetBtn = () => {
    this.setState({
      inpVal: '',
      sourceName: '0'
    }, () => {
      this.getIllicitList()
    })
    
  }

  sourceHander = (val) => {
    this.setState({
      sourceName: val.toString()
    }, function () {
      this.searchCon()
    })
    
  }

  onChangeDate = (date, dateString) => {
    if (dateString[0] === '' && dateString[1] === '') {
      this.setState({
        timeValue: ['', ''],
        publishTime: '',
        endTime: ''
      })
      return
    }
    this.setState({
      publishTime: dateString[0].split(' ')[0],
      endTime: dateString[1].split(' ')[0],
      timeValue: [moment(dateString[0]), moment(dateString[1])]
    })
  }

  exportDefaultExcel = () => {
    let endTime = this.state.endTime
    let publishTime = this.state.publishTime
    u.illicitQuery({
      source_number: this.state.sourceName === '0' ? '' : this.state.sourceName,
      domain: this.state.inpVal,
      sTime: publishTime,
      eTime: endTime
    }, data => {
      if (data.code === 200) {
        let dataSource = []
        let arr = ['阿里巴巴', '互联网欺诈平台', '苏州中惠盈', '360安全中心']
        dataSource = data.data.map((el, index) => {
          return {  
            crawl_time: el.crawl_time.splice(0, -2),
            domain: el.domain,
            source_number: arr[el.source_number - 1]
          }
        })
        var _headers = [{
          k: 'source_number', v: '来源',
        }, {
          k: 'domain', v: '网址',
        }, {
          k: 'crawl_time', v: '上报时间',
        }]
        exportExcel(_headers, dataSource);
        message.success(`导入成功`);
      } else {
        message.error(`导入失败`);
        return
      }
      
    })
  }

  render() {
    return (
      <div className="illicit">
        <div className="operate-list">
          <ul>
            <li>
              <span>来源:</span>
              <Select className="sel" value={this.state.sourceName} onChange = {this.sourceHander}>
                <Option value="0">全部</Option>
                <Option value="1">阿里巴巴</Option>
                <Option value="2">互联网欺诈平台</Option>
                <Option value="3">苏州中惠盈</Option>
                <Option value="4">360安全中心</Option>
              </Select>
            </li>
            <li>  
              <span>域名:</span>
              <input type="text" placeholder="请输入域名" className="inp" onChange={this.handelChange.bind(this)} value={this.state.inpVal}/>
            </li>
            <li>
              <RangePicker
                showTime={{format: 'HH:mm'}}
                format="YYYY-MM-DD HH:mm"
                placeholder={['开始时间', '结束时间']}
                value={this.state.timeValue}
                onChange={this.onChangeDate}
              />
            </li>
            <li>
              <Button  onClick={() => this.exportDefaultExcel()}>导出</Button>
            </li>
            <li>
              <Button className="inquire" onClick={this.queryBtn}>查询</Button>
              <Button className="reset" onClick={this.resetBtn}>重置</Button>
            </li>
          </ul>
        </div>
        <table className="table-list">
          <thead>
            <tr className="active">
              <td>
                <div className="serial">序号</div>
              </td>
              <td>
                <div className="domain">域名</div>
              </td>
              <td>
                <div className="source_">来源</div>
              </td>
              <td>
                <div className="appear">上报时间</div>
              </td>
            </tr>
          </thead>
          <tbody>
            {this.state.list.map((ele, index) => {
              return (
                <tr key={index}>
                  <td>
                    <div>{((this.state.page - 1) * 10) + index + 1}</div>
                  </td>
                  <td>
                    <div>{ele.domain}</div>
                  </td>
                  <td>
                    <div>{
                      this.state.source.map((el) => {
                        if (el.source_number === ele.source_number) {
                          return el.source
                        }
                      })
                    }</div>
                  </td>
                  <td>
                    <div>{ele.crawl_time.slice(0,-2)}</div>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
        <div className="paging">
          <Pagination onChange={this.onChangeSize} defaultCurrent={1} total={this.props.total ? this.props.total - 1 : this.state.total - 1} style={{display: 'inline-block'}}/>
          <span className="aggretate">总计: {this.state.total}</span>
        </div>
      </div>
    )
  }
}

export default IllicitName
